<html>
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
    .box:hover {
        box-shadow: 0 8px 8px rgba(10, 16, 20, .24), 0 0 8px rgba(10, 16, 20, .12);
        text-decoration: none;
        border: 0;
        transform: translateY(-5px);
    }

    .head {
        margin-top: 2rem;
        display: flex;
        justify-content: space-between;
        height: 3.8rem;
        line-height: 3.8rem;
    }

    .text_hidden {
        height: 3.8rem;
        overflow: hidden;
        display: -webkit-box;
        text-overflow: ellipsis;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        text-align: center;
    }

    .h2_hidden {
        height: 1.8rem;
        line-height: 1.8rem;
        overflow: hidden;
        display: -webkit-box;
        text-overflow: ellipsis;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        text-align: center;
    }

    .photo_hight {
        position: relative;
        height: 27.5rem;
    }

    .photo_hidden {
        width: 100%;
        height: 15.5rem;
    }

    .photo_hidden img {
        height: 15.5rem;
        width: 100%;
    }

    .photo_hight a {
        color: #000;
    }
    /* .recommend {
        color: red;
        position: absolute;
        background-color: #fff;
        top: 0rem;
        right: 0rem;
    } */

    .layui-btn-sm i {
        font-size: 2.4rem !important;
    }

    /*.praise::after {*/
    /*    content: '50';*/
    /*}*/

    /*.browse::after {*/
    /*    content: '150';*/
    /*}*/
</style>
<div class="container">
    <div>
        <h2>合照相册总览</h2>
    </div>
    <div class="container " style="margin-top: 2rem; background-color: #fff; ">
        <div class="row " id="album-body">

        </div>
    </div>
</div>
<!--暂不支持分页-->
<div style="text-align: center;">
    <div id="page-controller"></div>
</div>
<script>
    //获取个人班级id
    var collegeId="";
    try {
        var userData;
        jq1111.ajax({
            type: "GET",
            async:false,
            crossDomain:true,
            url: BasePath+"api/Account",
            contentType: "application/json",
            xhrFields: {
                withCredentials: true
            },
            success:function (message) {
                console.log(message);
                userData=message.data;
                collegeId=userData.college.id;
            },
            error:function (message) {
                console.log(message.responseJSON);
                layer.msg('失败:'+message.responseJSON.msg);
            },
        });
    }
    catch (e) {
        console.log(e);
    }


    var albumCount;
    jq1111.ajax({
        type: "GET",
        crossDomain:true,
        async:false,
        url: BasePath+"api/GroupAlbum/Query?page=1&limit=12&collegeId="+collegeId,
        contentType: "application/json",
        dataType:"json",
        xhrFields: {
            withCredentials: true
        },
        success:function (message) {
            albumCount=message.count;
        },
        error:function (message) {
            console.log(message.responseJSON);
        },
    });

    function update(message) {
        console.log(message);
        albumCount=message.count;
        for (j=0;j<message.data.length;j++){
            if(message.data[j].coverid===null){
                continue
            }
            jq1111('#album-body').append('<div class=" col-md-3 box col-xs-6 photo_hight">\n' +
                '                <div class="photo_hidden"><img src="' + BasePath + 'api/resource/' + message.data[j].coverid+ '" alt=" " class="img-responsive center-block"></div>\n' +
                '                <a href="'+'page/admin/group-album-manage/show.html?GroupalbumId='+message.data[j].id+'">\n' +
                '                    <h4 class="h2_hidden"><strong>'+message.data[j].title+'</strong> </h4>\n' +
                '                    <!-- <span class="layui-badge-rim recommend layui-bg-blue">Hot</span> -->\n' +
                '                </a>\n' +
                '                <div class="layui-btn-group ">\n' +
                '                    <button type="button" class="layui-btn layui-btn-sm  layui-btn-primary praise"  onclick="ilikeit('+message.data[j].id+')" style="border: none;">\n' +
                '                    <i class="layui-icon">&#xe6c6;</i>\n' +message.data[j].likeCount+
                '                    </button>\n' +
                '                    <button type="button" class="layui-btn layui-btn-sm  layui-btn-primary browse" style="border: none;">\n' +
                '                    <i class="fa fa-eye"></i>\n' +message.data[j].downloadCount+
                '                    </button>\n' +
                '                </div>\n' +
                '            </div>')
        }
    }

    function ilikeit(id) {
        try {
            jq1111.ajax({
                type: "POST",
                crossDomain:true,
                async:false,
                url: BasePath+"api/Album/"+id+"/Like",
                contentType: "application/json",
                dataType:"json",
                xhrFields: {
                    withCredentials: true
                },
                success:function (message) {
                    alert('点赞成功');
                    location.reload();
                },
                error:function (message) {
                    console.log(message.responseJSON);
                },
            });
        }catch (e) {
            console.log(e)
        }
    }

    //初始化分页
    layui.use(['laypage', 'layer'], function() {
        var laypage = layui.laypage,
            layer = layui.layer;

        //完整功能
        laypage.render({
            elem: 'page-controller',
            count: albumCount,
            limit:12,
            layout: ['count', 'prev', 'page', 'next', 'skip'],
            jump: function(obj) {
                jq1111.ajax({
                    type: "GET",
                    crossDomain:true,
                    async:false,
                    url: BasePath+"api/GroupAlbum/Query?page="+obj.pages+"&limit=12&collegeId="+collegeId,
                    contentType: "application/json",
                    dataType:"json",
                    xhrFields: {
                        withCredentials: true
                    },
                    success:update,
                    error:function (message) {
                        console.log(message.responseJSON);
                    },
                });
                console.log(obj)
            }
        });

    })
</script>

</html>